<template>
  <div>
    <!-- 头部 -->
    <header>
      <router-link to="/order/writeOrder" class="flex fcc head underline bg-fff pl-10">
        <i class="iconfont iconleft fg2 picture"></i>
        <p class="fg2 f16">订单支付</p>
      </router-link>
    </header>
    <!-- 主体 -->
    <main class="main bg-fff">
      <div class="introduce flex aic">
        <img
          class="picture pl-20"
          src="https://img.villaday.com/images/house_207/21711/21711-10-128068.JPG-t3"
          alt
        >
        <div class="time">
          <p class="f14 hotel">深圳较场尾.{{houseTypeName}}</p>
          <div class="f12 f999 pt-20">
            <p>九房一厅独栋客栈,可入住18人</p>
            <p class="pt-15">入住日期:{{startDate | formatTime}} - {{endDate | formatTime}}</p>
          </div>
        </div>
      </div>
      <div class="layer"></div>
      <div class="moneys">
        <p class="f16 f999 earnest flex jc-sb aic pl-20 pr-20">
          <span>订单金额</span>
          <span>￥{{totalMoney}}元</span>
        </p>
        <p class="f16 money flex jc-sb aic pl-20 pr-20">
          <span>实付金额</span>
          <span>￥{{totalMoney}}元</span>
        </p>
      </div>
      <div class="layer"></div>
      <div>
        <div class="f16 payment underline">支付方式</div>
        <div class="alipay flex underline">
          <i class="iconfont iconzhifubao icon pl-20"></i>
          <p class="f16 pl-10">支付宝支付</p>
        </div>
        <div class="alipay flex underline active">
          <i class="iconfont iconWeiXin pl-20"></i>
          <p class="f16 pl-10">微信支付</p>
        </div>
      </div>
      <div class="pt-20 tips">
        <p class="f999 f12">温馨提示:订单将为你保留一个小时,请尽快付款哦;</p>
      </div>
    </main>
    <!-- 底部 -->
    <footer class="bg-fff">
      <div class="footer flex jc-sb fixed">
        <p class="bg-fff w100pc pl-20">
          <span>应付总额:</span>
          <span class="pl-15 pl-15">{{totalMoney}}</span>
        </p>
        <div @click="pay">
          <p class="payment">立即支付</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      tenantName: "",
      houseTypeName: "",
      orderId: ""
    };
  },
  computed: {
    ...mapGetters(["startDate", "endDate", "totalMoney"])
  },
  created() {
    this.tenantName = this.$route.query.tenantName;
    this.houseTypeName = this.$route.query.houseTypeName;
    this.orderId = this.$route.query.orderId;
  },
  methods: {
    // 立即支付
    pay() {
      this.$router.push({
        path: "/order/pay",
        query: {
          preOrderId: this.orderId,
          shopName: this.houseTypeName,
          payType: "微信支付"
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../style/orderPay.less";
</style>

